<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div{
				border: 1px solid blue;
				width: 240px;
				height: 480px;
				
				position: relative;
			}
			#div1{
				border: 1px solid white ;
				/* width: 240px;
				height: 480px; */
				
				position: absolute;
			}
			
			#block1{
				position: absolute;
				width: 24px;
				height: 48px;
				border: 1px solid blueviolet;
				background-color: antiquewhite;
				
				left: 72px;
			}
			#block2{
				position: absolute;
				width: 24px;
				height: 24px;
				border: 1px solid blueviolet;
				background-color: antiquewhite;
				
				left: 120px;
			}
			#block3{
				position: absolute;
				width: 24px;
				height: 24px;
				border: 1px solid blueviolet;
				background-color: antiquewhite;
				
				left: 72px;
			}
			#block4{
				position: absolute;
				width: 24px;
				height: 24px;
				border: 1px solid blueviolet;
				background-color: antiquewhite;
				
				left: 96px;
			}
			
		</style>
		<script type="text/javascript">
			function yidong(){
				 var a= document.getElementById("div1");
				 var top = div1.offsetTop;
				 
				 var s;
				 div1.style.top = (top+24)+"px";
				 
				 s = setTimeout("yidong()",500)
				 if(top > (480-96)){
					 clearTimeout(s);
				 }
			}
			function asda(){
				block = document.getElementById("div1").cloneNode(true);
				block.style.top = 0;
				var div = document.getElementById("div");//父元素
				
				div.appendChild(block)
			}
		</script>
		<script type="text/javascript">
			//放开左移
			document.onkeydown = function(){
				var keyCode = event.keyCode;
				
				var block = document.getElementById("div1");
				
				var top = block.offsetTop;
				var left = block.offsetLeft;
				
				if(keyCode == 37 && left > -72){
					block.style.left = (left-24)+"px";
				}else if(keyCode == 39 && left < (240-144)){
					block.style.left = (left+24)+"px";
				}else if(keyCode == 38 && top > 0){
					block.style.top = (top-24)+"px";
				}else if(keyCode == 40 && top < (480-48)){
					block.style.top = (top+24)+"px";
				}
			}
			
		</script>
	</head>
	<body>
		<div id="div">
			<div id="div1">
				<div id="block1"></div>
				<div id="block2"></div>
				<div id="block3"></div>
				<div id="block4"></div>
				<div id="block5"></div>
			</div>
		</div>
		<input type="button" value="开始游戏" onclick="yidong()"/>
		<input type="button" value="创建新块" onclick="asda()"/>
	</body>
</html>
